<template>
  <div>
    <search-form
      ref="refSearch"
      :shop-list="shopList"
      @search="handleSearch"
    />
    <div v-loading="dataLoading1" class="contain-box">
      <!-- <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleEditItem()">增加指标</el-button> -->
      <div v-if="!originData.length" style="color:#888;text-align:center;line-height:260px">
        暂无数据
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item,index) in originData" :key="index" title="一致性 Consistency" :name="index">
          <template #title>
            <div class="btn-group">
              <div style="font-weight:bold">
                <!-- <el-button size="mini" @click.stop="handleEditItem(item.secondLevel.indexId)">编辑指标</el-button>
                <el-button size="mini" @click.stop="handleDeleteItem(item.secondLevel.indexId)">删除指标</el-button> -->
                {{ item.secondLevel.name }}
              </div>
              <div>
                <!--  <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('table',index)">列表</el-button>
                <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('bar',index)">柱状图</el-button>
                <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('line',index)">折线图</el-button> -->
              </div>
            </div>
          </template>
          <div v-if="!Object.keys(item.secondLevel).length" style="color:#888;text-align:center;line-height:260px">
            暂无数据
          </div>
          <div v-else style="text-align:center">
            <Table
              v-if="(item.chartStyle1==='table'||!item.chartStyle1)&&!item.firstLevel&&Object.keys(item.secondLevel).length"
              :style-num="(item.secondLevel.secondCategoryList&&item.secondLevel.secondCategoryList.length)||1"
              :data-list="item.secondLevel"
            />
            <series-table
              v-if="(item.chartStyle1==='table'||!item.chartStyle1)&&(item.firstLevel&&Object.keys(item.firstLevel).length)"
              :style-num="(item.firstLevel.secondCategoryList&&item.firstLevel.secondCategoryList.length)||1"
              :data-list="item.firstLevel"
            />
            <bar-charts v-if="item.chartStyle1==='bar'&&Object.keys(item.secondLevel).length" :data-list="item.secondLevel" :table-type="'prices'+index" :second-list="item.secondLevel.secondCategoryList||[]" :series-type="item.secondLevel.seriesList" :type-list="item.secondLevel.firstCategoryList" />
            <line-charts v-if="item.chartStyle1==='line'&&Object.keys(item.secondLevel).length" :data-list="item.secondLevel" :table-type="'prices'+index" :second-list="item.secondLevel.secondCategoryList||[]" :series-type="item.secondLevel.seriesList" :type-list="item.secondLevel.firstCategoryList" />
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <edit v-if="addDlgVisible" :detail-data="activeData" :visible.sync="addDlgVisible" @success="refreshData" />
  </div>

</template>
<script>
import seriesTable from './SeriesTable'
import searchForm from './SearchForm'
import { getShopList } from '@/api/display/salesData'
import Table from './Table'
import barCharts from './BarCharts'
import lineCharts from './LineCharts'
import { monthRange } from '@/utils'

import edit from './Edit'
import { deleteIndex, queryChildTableData } from '@/api/display/spec'

export default {
  name: 'Spec',
  components: { edit, barCharts, lineCharts, Table, searchForm, seriesTable },
  data() {
    return {
      monthRange,
      activeNames: [],
      dataLoading: false,
      dataLoading1: false,
      addDlgVisible: false,
      styleNum: 1,
      typeList: [],
      typeList1: [],
      secondList: [],
      secondList1: [],
      originData: [],
      seriesList: [],
      seriesList1: [],
      chartStyle: 'table',
      chartStyle1: 'table',
      allData: [],
      allData1: [],
      dataList: {}, // 显示数据
      dataList1: {}, // 显示数据
      activeData: {},
      params: {},
      tableSelected: {},
      shopCode: '',
      category: '4158', // 正式环境，分析品类为沙发的编码4158，测试环境4016
      shopList: [],
      monthList: ''
    }
  },
  created() {
    getShopList().then(res => {
      if (res.success && res.data.length > 0) {
        this.shopList = res.data
        this.shopCode = res.data[0].shopCode
        this.$refs.refSearch.updateValue('shopCode', res.data[0].shopCode)
        this.monthList = monthRange('2022-11', '2023-04').join(',')
        this.params = {
          series: 'A',
          shopCode: res.data[0].shopCode,
          superCategoryCode: '4016',
          firstCategory: 'B'
        }
        this.refreshData()
      } else {
        this.$message.warning('当前用户下没有门店')
      }
    })
  },
  mounted() {
  },
  methods: {
    changeTab(data) {
      // console.log('改变tab', data)
    },
    handleEditItem(indexId) {
      if (indexId) this.activeData = { id: indexId }
      else this.activeData = {}
      this.addDlgVisible = true
    },
    handleDeleteItem(indexId) {
      this.$confirm(`是否删除指标?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIndex(indexId).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            // 重新获取指标
            this.refreshData()
          }
        })
      }).catch(() => {})
    },
    // 搜索
    handleSearch(data, formData) {
      if (!formData.shopCode) {
        this.$message.warning('请选择门店')
      }
      // this.params = data.paramsRaw
      this.shopCode = formData.shopCode
      this.category = formData.superCategoryCode
      this.monthList = formData.month
      this.activeNames = []
      this.refreshData()
    },
    initData(dataList) {
      this.seriesList = dataList
      this.typeList = dataList.firstCategoryList
      const keyList = Object.keys(dataList).filter(v => Number(v) >= 0)
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push(dataList[keyList[i]])
      }
      const allList = []
      for (let j = 0; j < this.typeList.length; j++) {
        const list = []
        for (let k = 0; k < datas.length; k++) {
          if (datas[k][0] === this.typeList[j]) {
            list.push(datas[k].splice(1))
          }
        }
        allList.push({ type: this.typeList[j], list: list })
      }
      return allList
    },
    initData1(dataList) {
      this.typeList1 = dataList.firstCategoryList
      const keyList = Object.keys(dataList).filter(v => Number(v) >= 0)
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push(dataList[keyList[i]])
      }
      const allList = []
      for (let j = 0; j < this.typeList1.length; j++) {
        const list = []
        for (let k = 0; k < datas.length; k++) {
          if (datas[k][0] === this.typeList1[j]) {
            list.push(datas[k].splice(1))
          }
        }
        allList.push({ type: this.typeList1[j], list: list })
      }
      return allList
    },
    handleChangeStyle(value = '') {
      this.chartStyle = value
    },
    handleChangeStyle1(value = '', index) {
      this.$set(this.originData[index], 'chartStyle1', value)
    },
    handleExport() {

    },
    // 清空搜索
    clearSearch(data) {
    },
    refreshData() {
      // 子列表
      this.chartStyle1 = ''
      this.dataLoading1 = true
      this.originData = []
      queryChildTableData(this.shopCode, this.category, this.monthList).then(res => {
        if (res.success) {
          this.originData = res.data
          this.activeNames = this.originData.map((v, index) => index)
          this.chartStyle1 = 'table'
          this.dataLoading1 = false
          if (!res.data || res.data.length === 0) {
            this.$message.warning('暂无数据，请录入历史销售数据后再查看')
          }
        }
      }).catch(() => {
        this.dataLoading1 = false
      })
    }

  }

}
</script>
<style lang="scss" scoped>
.btn-group{
  padding:10px 0;
  display: flex;
  width: 80%;
  justify-content: space-between;
}
.contain-box{
  min-height: 260px;
  // margin: 0 90px;
//   display: flex;
//  align-self: center;
}
</style>
